import React from "react";
import i18next from "i18next";
import Page from "../../components/Page";
import {Content, PledgeNftItem, UnStartView, MobileView, SwitchButton, FlexViewCenter, CountDown, TotalLockView} from "../../components/components";
import ImageCommon from "../../assets/image/common/ImageCommon";
import {StyledTopBar} from "../../components/TopBar/TopBar";
import {useUpdateLogo} from "../../state/logoaction/hooks";
import styled from "styled-components";
import {colors} from "../../common/common";
import NftStore from "../../components/Nft/NftStore";
import useBasisCash from "../../hooks/useBasisCash";
import useHandleTransactionReceipt from "../../hooks/useHandleTransactionReceipt";
const coins = ["USDT","HBTC","MDX","wETH","wHT","TPT","FILDA","LAVA","NYC_USDT_LP"];

const Cay = React.memo(()=>{
    useUpdateLogo(ImageCommon.logo);
    // const totalTvl = useTotalTvl();
    const [totalTvl,setTotalTvl] = React.useState(0);
    const basisCash = useBasisCash();

    // return(
    //     <Page>
    //         <StyledTopBar
    //             bg={ImageCommon.banner_cay}
    //         >
    //         </StyledTopBar>
    //         <Content>
    //             <UnStartView></UnStartView>
    //         </Content>
    //     </Page>
    // )

    return(
        <Page>
            <StyledTopBar
                bg={ImageCommon.banner_cay}
            >
            </StyledTopBar>
            <Content>
                <FlexViewCenter>
                    <TotalLockView
                        title={"Total Value Locked:"}
                        amount={"$"+totalTvl.toFixed(4)}
                    ></TotalLockView>
                </FlexViewCenter>
                <PledgeWrap>
                    {coins.map((item,index)=>{
                        return(
                            <PledgeNftItem
                                key={'item_'+index}
                                coin={item}
                                setCount={(n:number)=>setTotalTvl(totalTvl+n)}
                            ></PledgeNftItem>
                        )
                    })}

                </PledgeWrap>
            </Content>
        </Page>
    )
})

const PledgeWrap = styled.div`
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    padding:50px;
    border: 2px solid #F27405;
    border-radius: 20px;
    background-color:${colors.FFFAF6};
    margin-bottom:50px;
    @media (max-width: 768px) {
       padding:0;
       border:0px solid #F27405;
       margin-bottom:0px;
       background-color:${colors.transparent};
       margin-bottom:30px;
       justify-content:center;
    };
`

export default Cay;
